<template>
    <div class="role-select">
        <el-select :modelValue="modelValue" @update:modelValue="handleUpdateModelValue" multiple :multiple-limit="limit"
            placeholder="请选择角色">
            <el-option v-for="item in list" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
    </div>
</template>

<script>
import { getRoleList } from "@/api/role";

export default {
    name: 'RoleSelect',
    props: {
        modelValue: {
            type: Array,
            default() {
                return [];
            },
        },
        limit: {
            type: Number,
            default: 3,
        }
    },
    emits: ["update:modelValue"],

    data() {
        return {
            value1: [],
            // 角色列表数据
            list: [],
        };
    },
    methods: {
        refresh() {
            getRoleList().then(data => {
                console.log(data);
                this.list = data
            })
        },
        handleUpdateModelValue(value) {
            console.log(value);
            // 将value作为参数传递给我的组件
            this.$emit("update:modelValue", value)
        }
    },
    created() {
        this.refresh()
    }
};
</script>

<style lang="scss" scoped>
.role-select {
    width: 100%;

    .el-select {
        width: 100%;
    }
}
</style>